<template>
    <ul class="favrdi f-cb j-flag">
        <li v-for="(item, index) in radioList" :key="item.id" :class="{ 'first': index === 0 }">
            <a :href="`/djradio?id=${item.id}`" class="u-cover u-cover-3 f-fl">
                <img :src="item.coverUrl" />
            </a>
            <div class="col cnt f-pr">
                <h3 class="tit f-fw0 f-fs1 f-thide">
                    <a :href="`/djradio?id=${item.id}`" class="s-fc1">{{ item.name }}</a>
                </h3>
                <div class="opt hshow" style="display: none;">
                    <span class="icn u-icn2 u-icn2-share" title="分享">分享</span>
                    <span class="icn u-icn2 u-icn2-del" title="删除">删除</span>
                </div>
            </div>
            <div class="col no s-fc4">{{ item.issueCount }}期</div>
        </li>
    </ul>
</template>

<script setup lang="ts">
interface RadioItem {
    id: number | string;
    name: string;
    coverUrl: string;
    issueCount: number;
}

defineProps<{
    radioList?: RadioItem[];
}>();
</script>

<style lang="scss" scoped>
.favrdi {
    margin-bottom: 24px;

    li {
        float: left;
        width: 100%;
        height: 50px;
        padding: 10px 0;
        border-top: 1px solid #e7e7e7;
        line-height: 50px;
        box-sizing: content-box;

        &:hover .hshow {
            display: block !important;
        }

        &.first {
            border-top: none;
        }

        .u-cover-3 {
            width: 50px;
            height: 50px;
        }

        .u-cover {
            position: relative;
            display: block;

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }

    .cnt {
        width: 488px;
        padding-right: 57px;
        line-height: 24px;

        .hshow {
            display: none;
        }

        .opt {
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -6px;
        }

        .icn {
            float: right;
            margin-right: 10px;
            text-indent: -9999px;
            cursor: pointer;
        }

        .u-icn2-share {
            width: 16px;
            height: 14px;
            background-position: -90px 0 !important;

            &:hover {
                background-position: -90px -20px !important;
            }
        }

        .u-icn2-del {
            width: 16px;
            height: 14px;
            background-position: -130px 0 !important;

            &:hover {
                background-position: -130px -20px !important;
            }
        }

        .u-icn,
        .u-icn2,
        .u-icn3 {
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background: url(../assets/MyMusic/icon2.png) no-repeat;
        }
    }

    .col {
        float: left;
        margin-left: 10px;

        .tit {
            line-height: 50px;
        }
    }

    .no {
        max-width: 40px;
        overflow: visible;
        white-space: nowrap;
    }
}
</style>
